<template>
<view class="wrapper">
  <view class="banner-wrapper" >
    <image :src="userbg" />
  </view>
  <view class="title-wrapper">
    <view  @click="handleCutMenu(item.id)" :class="{'menu-item':true,'select-menu-item':selectMenuItem===item.id}" v-for="(item,index) in menuList">
      {{item.title}}
    </view>
  </view>
<!--  <view class="content-wrapper" v-for="item in listData.data">-->
<!--    <view class="content">-->
<!--      <view class="item-title" :style="handleTitleStyle(item.direction)">-->
<!--        <view class="date-text">{{ timestampToTime(item.date,'YYYY-MM-DD HH:mm:ss' )}}</view>-->
<!--        <view class="title-text">{{item.direction}}</view>-->
<!--      </view>-->
<!--      <view class="item-content">-->
<!--        <view class="item-content-item">-->
<!--          {{item.msg1}}:{{item.msg1Info}}-->
<!--        </view>-->
<!--        <view class="item-content-item">-->
<!--          {{item.msg2}}:{{item.msg2Info}}-->
<!--        </view>-->
<!--      </view>-->
<!--    </view>-->
<!--  </view>-->
  <view class="now-content-wrapper">
    <view class="content"  v-for="item in listData.data">
      <view class="content-left">

        <image v-if="item.pic!='' && item.pic!= undefined" :src="item.pic"/>
        <image v-else :src="acatar"/>

      </view>
      <view class="content-right">
        <view class="content-item">
          <view class="item-label">人员信息:</view> {{item.className+'-'+item.name}}
        </view>
        <view v-if="!['4','5'].includes(selectMenuItem)"  class="content-item">
          <view class="item-label">出入设备:</view>{{item.position}}
        </view>
        <view  v-if="['1'].includes(selectMenuItem)"  class="content-item">
          <view class="item-label">开门结果:</view>{{item.status}}
        </view>
        <view  class="content-item">
          <view class="item-label">学号:</view>{{item.stuCode}}
        </view>
        <view  class="content-item">
          <view class="item-label">刷脸时间:</view>{{item.date? timestampToTime(item.date,'YYYY-MM-DD HH:mm:ss' ):''}}
        </view>
        <view v-if="['5'].includes(selectMenuItem)" class="content-item">
          <view class="item-label">离校时长:</view><view style="color: red">{{item.schoolTime}}</view>
        </view>
        <view v-if="['4'].includes(selectMenuItem)" class="content-item">
          <view class="item-label">校外时长:</view><view style="color: red">{{item.schoolTime}}</view>
        </view>
      </view>
    </view>
  </view>
<search ref="searchRef" @subData="handleSearchData"></search>
<!--  <view>-->
<!--    <view>-->
<!--      加解密测试-->
<!--    </view>-->
<!--    <view>-->
<!--      加密前-->
<!--      <input v-model="jmq" @input="handletest"/>-->
<!--    </view>-->
<!--    <view >-->
<!--      加密后-->
<!--      <view style="width:100%;height: 3rem;overflow-wrap: break-word">-->
<!--        {{jmh}}-->
<!--      </view>-->
<!--    </view>-->
<!--    <view>-->
<!--      解密后-->
<!--      {{jiemh}}-->
<!--    </view>-->
<!--  </view>-->
</view>
</template>

<script lang="ts" setup>
import {reactive, ref, nextTick, onMounted} from 'vue'
import search from '@/components/search.vue'
import cache from "@/utils/cache";
import {TOKEN_KEY} from "@/enums/cacheEnums";
import acatar from "@/static/avatar.png"
import userbg from "@/static/userBg.png"
import {
  getRecordStudentLateList,
  getRecordStudentList,
  getRecordStudentReturnList,
  getRecordTeacherLateList,
  getRecordTeacherList,
  getRecordTeacherReturnList,
  getTimeStudentList,
  getTimeStudentNoticeList,
  getTimeTeacherList,
  getTimeTeacherNoticeList,
  type QueryParams
} from "@/api/api";
import {timestampToTime} from "@/utils/disposeDate";
import {onLoad, onReachBottom} from "@dcloudio/uni-app";
// import {encrypt,decrypt} from '@/utils/jsencrypt'
// const jmq=ref()
// const jmh=ref()
// const jiemh=ref()
// const handletest=()=>{
//   jmh.value=encrypt(jmq.value)
//   jiemh.value=decrypt(jmh.value)
//
// }

const searchRef=ref()
const heightCount=ref()
const menuList=ref([
  {
    title:'出入记录',
    id:'1',
  },
  {
    title:'校外晚归',
    id:'2',
  },
  {
    title:'校外未归',
    id:'3',
  },
  {
    title:'校外时长统计',
    id:'4',
  },
  {
    title:'预警',
    id:'5',
  }
])
onLoad((e:any)=>{
  selectMenuItem.value=e.id
})
const selectMenuItem=ref(cache.get('selectPage'))
const queryData=reactive({
  data:{} as QueryParams
})
queryData.data.pageNum=1
queryData.data.pageSize=10
const stuOrTea=ref(cache.get('idType'))
interface listParams{
  collageName:string
  createTime:string
  deptName:string
  name:string
  stuCode:string
  sex:string
  time:string
}
const listData=reactive({
  data:[] as any[]
})
const handleCutMenu=(id:string)=>{
  nextTick()
  searchRef.value?.handleResetSearchButton()
  handleQueryDataReset()
  handleMenuButton(id)
  listData.data=[]
}

const handleMenuButton=(id:string)=>{

  selectMenuItem.value=id

  cache.set('selectPage',id)
  switch (id){
    case '1':
      heightCount.value=5
      if(stuOrTea.value==='1'){
        getRecordStudentList(queryData.data).then(e=>{
          if(e.code==200){
            e.data.rows.forEach((item:any)=>{
              listData.data.push({
                collageName:item.collageName,
                className:item.className,
                name:item.name,
                stuCode:item.pin,
                sex:handleSex(item.sex),
                date:item.date,
                direction:handleDirection(item.direction),
                position:item.position,
                status:handleStatus(item.status),
                pic:item.pic
              })
            })
          }
        })
      }else if(stuOrTea.value==='3'){
        getRecordTeacherList(queryData.data).then(e=>{
          if(e.code==200){
            e.data.rows.forEach((item:any)=>{
              listData.data.push({
                collageName:item.collageName,
                className:item.className,
                name:item.name,
                stuCode:item.pin,
                sex:handleSex(item.sex),
                date:item.date,
                direction:handleDirection(item.direction),
                position:item.position,
                status:handleStatus(item.status),
                pic:item.pic
              })
            })
          }
        })
      }
      break;
    case '2':
      if(stuOrTea.value==='1'){
        getRecordStudentLateList(queryData.data).then(e=>{
          if(e.code==200){
            if(e.code==200){
              e.data.rows.forEach((item:any)=>{
                listData.data.push({
                  collageName:item.collageName,
                  className:item.deptName,
                  name:item.name,
                  stuCode:item.personCode,
                  sex:handleSex(item.sex),
                  date:item.time,
                  position:item.position,
                  status:handleStatus(item.status),
                  pic:item.pic
                })
              })
            }
          }
        })
      }else if(stuOrTea.value==='3'){
        getRecordTeacherLateList(queryData.data).then(e=>{
          if(e.code==200){
            e.data.rows.forEach((item:any)=>{
              listData.data.push({
                collageName:item.collageName,
                className:item.deptName,
                name:item.name,
                stuCode:item.personCode,
                sex:handleSex(item.sex),
                date:item.time,
                position:item.position,
                status:handleStatus(item.status),
                pic:item.pic
              })
            })
          }
        })
      }
      break;
    case '3':
      if(stuOrTea.value==='1'){
        getRecordStudentReturnList(queryData.data).then(e=>{
          if(e.code==200){
            e.data.rows.forEach((item:any)=>{
              listData.data.push({
                collageName:item.collageName,
                className:item.deptName,
                name:item.name,
                stuCode:item.personCode,
                sex:handleSex(item.sex),
                date:item.time,
                direction:handleDirection(item.direction),
                position:item.position,
                status:handleStatus(item.status),
                pic:item.pic
              })
            })
          }
        })
      }else if(stuOrTea.value==='3'){
        getRecordTeacherReturnList(queryData.data).then(e=>{
          if(e.code==200){
            e.data.rows.forEach((item:any)=>{
              listData.data.push({
                collageName:item.collageName,
                className:item.deptName,
                name:item.name,
                stuCode:item.personCode,
                sex:handleSex(item.sex),
                date:item.time,
                direction:handleDirection(item.direction),
                position:item.position,
                status:handleStatus(item.status),
                pic:item.pic
              })
            })
          }
        })
      }
      break;
    case '4':
      queryData.data.personName=queryData.data.name
      delete queryData.data.name
      if(stuOrTea.value==='1'){
        getTimeStudentList(queryData.data).then(e=>{
          if(e.code==200){
            e.data.rows.forEach((item:any)=>{
              listData.data.push({
                collageName:item.collageName,
                className:item.className,
                name:item.personName,
                stuCode:item.personCode,
                sex:handleSex(item.sex),
                date:item.time,
                direction:handleDirection(item.direction),
                position:item.position,
                status:handleStatus(item.status),
                schoolTime:item.schoolTime,
                pic:item.pic
              })
            })
          }
        })
      }else if(stuOrTea.value==='3'){

        getTimeTeacherList(queryData.data).then(e=>{
          if(e.code==200){
            e.data.rows.forEach((item:any)=>{
              listData.data.push({
                collageName:item.collageName,
                className:item.className,
                name:item.personName,
                stuCode:item.personCode,
                sex:handleSex(item.sex),
                date:item.time,
                direction:handleDirection(item.direction),
                position:item.position,
                status:handleStatus(item.status),
                schoolTime:item.schoolTime,
                pic:item.pic
              })
            })
          }
        })
      }
      break;
    case '5':
      queryData.data.personName=queryData.data.name
      delete queryData.data.name
      heightCount.value=4
      if(stuOrTea.value==='1'){
        getTimeStudentNoticeList(queryData.data).then(e=>{
          if(e.code==200){
            e.data.rows.forEach((item:any)=>{
              listData.data.push({
                collageName:item.collageName,
                className:item.className,
                name:item.personName,
                stuCode:item.personCode,
                sex:handleSex(item.sex),
                date:item.time,
                direction:handleDirection(item.direction),
                position:item.position,
                status:handleStatus(item.status),
                schoolTime:item.schoolTime,
                pic:item.pic
              })
            })
          }
        })
      }else if(stuOrTea.value==='3'){
        getTimeTeacherNoticeList(queryData.data).then(e=>{
          if(e.code==200){
            e.data.rows.forEach((item:any)=>{
              listData.data.push({
                collageName:item.collageName,
                className:item.className,
                name:item.personName,
                stuCode:item.personCode,
                sex:handleSex(item.sex),
                date:item.time,
                direction:handleDirection(item.direction),
                position:item.position,
                status:handleStatus(item.status),
                schoolTime:item.schoolTime,
                pic:item.pic
              })
            })
          }
        })
      }
      break;
  }
}

handleMenuButton(selectMenuItem.value)
const handleQueryDataReset=()=>{
  queryData.data={
    name:'',
    pin:'',
    beginTime:'',
    endTime:'',
    collageId:'',
    classId:'',
    pageNum:1,
    pageSize:10
  }
}
const handleSearchData=(e:any)=>{
  queryData.data={
    name:e.data.stuName,
    pin:e.data.stuCode,
    beginTime:e.data.startDate,
    endTime:e.data.endDate,
    collageId:e.data.collageId,
    classId:e.data.classId,
    pageNum:1,
    pageSize:10
  }
  listData.data=[]
  handleMenuButton(selectMenuItem.value)
}
const handleTitleStyle=(e:string)=>{
  switch (e){
    case '进校':
      return defaultStyle.value;
    case '出校':
      return warnStyle.value;
    case '未归':
      return errorStyle.value;
  }
}
const handleDirection=(e:string)=>{
  switch (e){
    case '0':
      return '未知';
    case '1':
      return '进校';
    case '2':
      return '出校';
  }
}
const handleStatus=(e:string)=>{
  switch (e){
    case '0':
      return '核验通过';
    case '1':
      return '核验失败';
    case '2':
      return '黑名单';
  }
}
const handleSex=(e:string)=>{
  switch (e){
    case '0':
      return '男';
    case '1':
      return '女';
    case '2':
      return '未知';
  }
}

const assignmentData=(arrData : any[])=>{
  // arrData.reduce()
}
const defaultStyle=ref({backgroundColor:'#0C9D0C'})
const warnStyle=ref({backgroundColor:'#F05800'})
const errorStyle=ref({backgroundColor:'#F21E06'})
//下拉刷新
onReachBottom(()=>{
  queryData.data.pageNum+=1
  handleMenuButton(selectMenuItem.value)
})
</script>

<style scoped lang="scss">
.wrapper{
  display: flex;
  background-color: #EBEAF1;
  min-height: calc(100vh);
  flex-wrap: wrap;
  align-content: flex-start;
.banner-wrapper{
  width: 100%;
  height: 7rem;
  image {
    width: 100%;
    height: 100%;
  }
}
  .title-wrapper{
    display: flex;
    height: 3rem;
    justify-content: space-around;
    margin-bottom: 0.5rem;
    width: 100%;
    background-color: #F8F8F8	;
    //box-shadow: 0px 4px 5px -2px rgba(0, 0, 0, 0.6);
    .menu-item{
      line-height:2.8rem;
      height: 2.8rem;
    }
    .select-menu-item{
      color: #68A9F3;
      border-bottom: 0.2rem solid #68A9F3;
      line-height:2.8rem;
    }
  }
  .content-wrapper{
    width: 100%;
    padding:0.5rem 0.3rem;
    .content{
      background-color: white;
      border-radius: 10px;
      height: 7rem;
      width: 100%;

      .item-title{
        background-color: #0C9D0C;
        height: 2.5rem;
        border-top-right-radius: 10px;
        border-top-left-radius: 10px;
        display: flex;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        color: white;
        justify-content: space-between;
        align-items: center;
      }
      .item-content{
        display: flex;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        flex-direction: column;
        height: 4.5rem;
        justify-content: space-evenly;
      }
    }
  }
  .now-content-wrapper{
    width: 100%;
    padding:0.5rem 0.3rem;

    .content{
      margin-bottom: 0.5rem;
      width: 100%;
      background-color: white;
      height: 8rem;
      border-radius: 3px;
      display: flex;
      .content-left{
        width: 5rem;
        padding:0.8rem 0.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        image{
          width: 100%;
          height: 100%;
        }
      }
      .content-right{
        display: flex;
        justify-content: center;
        align-items: start;
        flex-direction: column;
      }
      .content-item{
        line-height: 1.3rem;
        display: flex;
        .item-label{
          width: 4.5rem;
        }
      }
    }
  }
}
</style>
